<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css" />
    <title>区域掩模</title>
    <style>
      html,
      body,
      #container {
        height: 100%;
      }
      .input-item {
        height: 2.2rem;
      }
      .btn {
        width: 6rem;
        margin: 0 1rem 0 2rem;
      }
      .input-text {
        width: 4rem;
        margin-right: 1rem;
      }
    </style>
  </head>
  <body>
    <div id="data" style="padding: 30px;"></div>
    <div id="container"></div>
    <div class="input-card" style="width: 24rem;">
      <div class="input-item">
        <input type="radio" name="func" checked="" value="marker" /><span class="input-text">画点</span>
        <input type="radio" name="func" value="polyline" /><span class="input-text">画折线</span>
        <input type="radio" name="func" value="polygon" /><span class="input-text" style="width:5rem;">画多边形</span>
      </div>
      <div class="input-item">
        <input type="radio" name="func" value="rectangle" /><span class="input-text">画矩形</span>
        <input type="radio" name="func" value="circle" /><span class="input-text">画圆</span>
      </div>
      <div class="input-item">
        <input id="clear" type="button" class="btn" value="清除" />
        <input id="close" type="button" class="btn" value="关闭绘图" />
      </div>
    </div>
    <script
      language="javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=52a208e99a6c24ab60208167d15cb5db&plugin=Map3D,AMap.DistrictSearch,AMap.MouseTool"
    ></script>
    <script language="javascript">
      var opts = {
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
      }
      //利用行政区查询获取边界构建mask路径
      //也可以直接通过经纬度构建mask路径
      var district = new AMap.DistrictSearch(opts)
      district.search('咸阳市', function(status, result) {
        var bounds = result.districtList[0].boundaries
        var mask = []
        for (var i = 0; i < bounds.length; i += 1) {
          mask.push([bounds[i]])
        }
        var map = new AMap.Map('container', {
          mask: mask,
          center: [108.19848536074164, 34.241771035259845],
          disableSocket: true,
          viewMode: '3D',
          showLabel: false,
          labelzIndex: 130,
          pitch: 40,
          zoom: 16,
          layers: [
            new AMap.TileLayer.RoadNet({
              //rejectMapMask:true
            }),
            new AMap.TileLayer.Satellite()
          ]
        })
        var maskerIn = new AMap.Marker({
          position: [116.501415, 39.926055],
          map: map
        })
        var maskerOut = new AMap.Marker({
          //区域外的不会显示
          position: [117.001415, 39.926055],
          map: map
        })
        //添加高度面
        var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 })
        map.add(object3Dlayer)
        var height = -8000
        var color = '#0088ffcc' //rgba
        var wall = new AMap.Object3D.Wall({
          path: bounds,
          height: height,
          color: color
        })
        wall.transparent = true
        object3Dlayer.add(wall)
        //添加描边
        for (var i = 0; i < bounds.length; i += 1) {
          new AMap.Polyline({
            path: bounds[i],
            strokeColor: '#99ffff',
            strokeWeight: 4,
            map: map
          })
        }
        var mouseTool = new AMap.MouseTool(map)
        //监听draw事件可获取画好的覆盖物
        var overlays = []
        mouseTool.on('draw', function(e) {
          document.getElementById('data').innerText = ''
          if(e.obj.Ce.radius){
            var o = Object.assign(e.obj.Ce.center,{radius:e.obj.Ce.radius})
            document.getElementById('data').innerText = JSON.stringify(o)
          } else if (e.obj.Ce.path) {
            document.getElementById('data').innerText = JSON.stringify(e.obj.Ce.path)
          } else if (e.obj.w.path) {
            document.getElementById('data').innerText = JSON.stringify(e.obj.w.path)
          } else {
            document.getElementById('data').innerText = JSON.stringify(e.obj.w.position)
          }
          overlays.push(e.obj)
          //console.log(JSON.stringify(e.obj.w.path))
          //console.log(JSON.stringify(e.obj.w.position))
        })

        function draw(type) {
          switch (type) {
            case 'marker': {
              mouseTool.marker({
                //同Marker的Option设置
              })
              break
            }
            case 'polyline': {
              mouseTool.polyline({
                strokeColor: '#80d8ff'
                //同Polyline的Option设置
              })
              break
            }
            case 'polygon': {
              mouseTool.polygon({
                fillColor: '#00b0ff',
                strokeColor: '#80d8ff'
                //同Polygon的Option设置
              })
              break
            }
            case 'rectangle': {
              mouseTool.rectangle({
                fillColor: '#00b0ff',
                strokeColor: '#80d8ff'
                //同Polygon的Option设置
              })
              break
            }
            case 'circle': {
              mouseTool.circle({
                fillColor: '#00b0ff',
                strokeColor: '#80d8ff'
                //同Circle的Option设置
              })
              break
            }
          }
        }
        var radios = document.getElementsByName('func')
        for (var i = 0; i < radios.length; i += 1) {
          radios[i].onchange = function(e) {
            draw(e.target.value)
          }
        }
        draw('marker')

        document.getElementById('clear').onclick = function() {
          map.remove(overlays)
          document.getElementById('data').innerText = ''
          overlays = []
        }
        document.getElementById('close').onclick = function() {
          mouseTool.close(true) //关闭，并清除覆盖物
          for (var i = 0; i < radios.length; i += 1) {
            radios[i].checked = false
          }
        }
      })
    </script>
  </body>
</html>
